<template>
    <div id="map">
    </div>
</template>

<script>
    import 'ol/ol.css';
    import Map from 'ol/Map';
    import OSM from 'ol/source/OSM';
    import {ImageArcGISRest} from 'ol/source';
    import ImageLayer from 'ol/layer/Image';
    import View from 'ol/View';
    import {Tile as TileLayer} from 'ol/layer';

    export default {
        name: "CanvasRendererImageLayer",
        data() {
            return {};
        },
        mounted() {

            //初始化地图
            new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer ({
                        source: new OSM()//加载OpenStreetMap 瓦片数据
                    }),
                    new ImageLayer({//canvas的渲染器可以绘制影像数据
                        source: new ImageArcGISRest({
                            ratio: 1,
                            params: {},
                            url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer',
                        }),
                        opacity:0.5,
                    }),
                ],
                //配置视图
                view: new View({
                    center: [-10997148, 4569099],
                    zoom: 4,
                })
            });
        },
        methods: {},
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        z-index: 9999;
    }
</style>